<template>
    <div class="container">
        <div class="item" v-for="(item, i) in list" :key="i" @click="_stateTarget(i)">
            <div class="head">
                <span>{{item.name}}</span>
                <i class='icon mt-arrow-right-o' :class="{'active':item.state}"></i>
            </div>
            <ul class="list" v-show="item.state">
                <li class="list-item" v-for="val in item.content" :key="val.id">
                    <h4>Q：{{val.title}}</h4>
                    <div class="content" v-html="val.content"></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {list} from './data'

    export default {
        name: 'index',
        data() {
            return {
                list: list,
            }
        },
        methods: {
            /**
             * 显示列表
             * @param index [Int] 索引
             * @private
             */
            _stateTarget(index) {
                this.list[index].state = !this.list[index].state
            }
        }
    }
</script>

<style lang='scss' scoped>
    .container {
        margin-top: 2rpx;
        .item {
            .head {
                display: flex;
                height: 88rpx;
                padding: 0 20rpx;
                align-items: center;
                justify-content: space-between;
                background-color: #fff;
                font-size: 28rpx;
                color: #2f2f2f;
                border-bottom: 2rpx solid #ddd;
                .mt-arrow-right-o {
                    color: #cccccc;
                    transition: all .5s;
                    transform: rotate(90deg);
                    &.active {
                        transform: rotate(270deg);
                    }
                }
            }

            .list {
                margin-top: -2rpx;
                padding: 0 30rpx;
                list-style: none;
                .list-item {
                    padding: 30rpx 0;
                    border-top: 2rpx solid #ddd;
                    h4 {
                        margin-bottom: 26rpx;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                    .content {
                        font-size: 24rpx;
                        color: #888;
                    }
                }
            }
        }
    }
</style>
